<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'

const width = ref(360)

// 事件演示
const basicSingleRef = ref<HTMLElement | null>(null)
const basicSingleFontSize = ref<number>(0)

// 溢出回调演示
const overflowInfo = ref<string>('')
function handleOverflow(size: number, el: HTMLElement) {
	overflowInfo.value = `触发 onOverflow：当前字号 ${size}px`
	el.title = `内容仍溢出（字号 ${size}px）`
}

// 各示例的配置
const optionsBasicSingle = { multiline: false, ellipsis: false, animate: 0 }
const optionsSingleEllipsis = { multiline: false, ellipsis: true, animate: 160, fontReady: true }
const optionsMultiline = {
	multiline: true,
	ellipsis: '…',
	animate: 160,
	fontReady: true,
	breakpoints: {
		0: { min: 12, max: 20 },
		768: { min: 14, max: 26 },
	},
}
const optionsAnimated = { multiline: false, ellipsis: false, animate: 300 }
const optionsBreakpoints = {
	multiline: true,
	ellipsis: false,
	breakpoints: {
		0: { min: 10, max: 16 },
		480: { min: 12, max: 20 },
		768: { min: 14, max: 28 },
	},
}
const optionsDirectionAware = { multiline: true, directionAware: true, animate: 160 }
const optionsRichText = { multiline: true, richText: true, animate: 160 }
const optionsOverflow = { multiline: false, ellipsis: false, onOverflow: handleOverflow, step: 0.5 }

onMounted(() => {
	const el = basicSingleRef.value
	if (!el) return
	const onResized = (e: Event) => {
		const detail = (e as CustomEvent).detail as { fontSize: number }
		basicSingleFontSize.value = detail?.fontSize ?? 0
	}
	el.addEventListener('textfit:resized', onResized as EventListener)
	onBeforeUnmount(() => {
		el.removeEventListener('textfit:resized', onResized as EventListener)
	})
})
</script>

<template>
	<div style="padding:16px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;">
		<h1>TextFit Vue 示例</h1>

		<label style="display:block; margin:12px 0;">
			容器宽度：{{ width }}px
			<input type="range" min="200" max="900" v-model.number="width" />
		</label>

		<section style="display:grid; grid-template-columns: 1fr; gap:16px; max-width: 1000px;">
			<!-- 基础：单行，不省略 -->
			<div :style="{ border:'1px solid #ddd', padding:'12px', width: width + 'px' }">
				<h3>基础：单行，不省略</h3>
				<div ref="basicSingleRef" v-textfit="optionsBasicSingle" style="width:100%; white-space:nowrap;">
					最基础用法：单行不省略，随容器宽度自适应缩放字号。
				</div>
				<small>当前字号（事件广播）：{{ basicSingleFontSize ? basicSingleFontSize + 'px' : '-' }}</small>
			</div>

			<!-- 单行 + 省略号 -->
			<div :style="{ border:'1px solid #ddd', padding:'12px', width: width + 'px' }">
				<h3>单行 + 省略号</h3>
				<div v-textfit="optionsSingleEllipsis" style="width:100%; white-space:nowrap;">
					超超超长标题（Single line with ellipsis when overflow）— 这是一段会根据容器宽度缩放的文本
				</div>
			</div>

			<!-- 多行 + 行高同步 -->
			<div :style="{ border:'1px solid #ddd', padding:'12px', width: width + 'px' }">
				<h3>多行 + 行高同步</h3>
				<p v-textfit="optionsMultiline" style="width:100%; margin:0;">
					多行文本示例：当容器宽度变化时，字号会自动缩放，同时行高会同步调整，以保证所有行完全可见且不溢出。支持断点区间配置、动画过渡与字体加载就绪后重算。
				</p>
			</div>

			<!-- 动画过渡 -->
			<div :style="{ border:'1px solid #ddd', padding:'12px', width: width + 'px' }">
				<h3>动画过渡</h3>
				<div v-textfit="optionsAnimated" style="width:100%; white-space:nowrap;">
					动画示例：平滑缩放字号，减少突兀跳变。
				</div>
			</div>

			<!-- 断点配置 -->
			<div :style="{ border:'1px solid #ddd', padding:'12px', width: width + 'px' }">
				<h3>断点配置</h3>
				<p v-textfit="optionsBreakpoints" style="width:100%; margin:0;">
					根据窗口宽度应用不同的字号区间（min/max），提升在不同屏幕下的观感一致性。
				</p>
			</div>

			<!-- 方向感知（纵排示意） -->
			<div :style="{ border:'1px solid #ddd', padding:'12px', width: width + 'px', height: '220px' }">
				<h3>方向感知（writing-mode: vertical-rl）</h3>
				<div v-textfit="optionsDirectionAware"
					style="width:100%; height: 160px; writing-mode: vertical-rl; border: 1px dashed #ccc;">
					方向感知示例：在纵排文本时，将以高度为主判断溢出并自适应字号。
				</div>
			</div>

			<!-- 富文本（行内标签保持样式） -->
			<div :style="{ border:'1px solid #ddd', padding:'12px', width: width + 'px' }">
				<h3>富文本（保留行内标签样式）</h3>
				<p v-textfit="optionsRichText" style="width:100%; margin:0;">
					这是一段 <strong>加粗</strong> 与 <em>强调</em> 的文本，保留行内标签样式，统一宽度测量后自适应缩放。
				</p>
			</div>

			<!-- 自定义溢出策略（回调） -->
			<div :style="{ border:'1px solid #ddd', padding:'12px', width: width + 'px' }">
				<h3>自定义溢出策略（onOverflow）</h3>
				<div v-textfit="optionsOverflow" style="width:100%; white-space:nowrap;">
					当缩至最小字号仍溢出时，触发回调由开发者决定处理策略（例如：加 title、显示提示等）。这是一段很长很长的文字用于触发溢出。
				</div>
				<small>{{ overflowInfo || '未触发溢出' }}</small>
			</div>
		</section>
	</div>
</template>

<style scoped>
input[type="range"] {
	width: 100%;
}
</style> 